<!-- 角色管理 - 移植翻页功能后的完整代码 -->
<template>
    <el-form :model="dictform" ref="dictref" :inline="true" style="text-align: left;">
        <el-form-item label="角色:" prop="Role_code">
            <el-input placeholder="请输入角色名称/编号" v-model="dictform.Role_code" style="width:180px"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="Role_status">
            <el-select placeholder="请选择" v-model="dictform.Role_status" style="width:200px">
                <el-option :value="0" label="启用"></el-option>
                <el-option :value="1" label="禁用"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button @click="Reset">重置</el-button>
            <el-button type="success" @click="Search">查询</el-button>
        </el-form-item>
    </el-form>
    <div style="text-align: left;">
        <el-button type="success" @click="drawer = true">添加</el-button>
        <el-button @click="DeleteAll">删除</el-button>
        <el-button @click="GetEnable">启用</el-button>
        <el-button @click="GetDeactivated">停用</el-button>
    </div>
    <!--表格-->
    <el-table :data="dictdata" style="margin-top: 10px;" @selection-change="SelectChange" ref="tableRef">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="role_name" label="角色名称"></el-table-column>
        <el-table-column prop="role_sort" label="排序"></el-table-column>
        <el-table-column prop="role_status" label="状态">
            <template #default="scope">
                {{ scope.row.role_status === 0 ? '启用' : '停用' }}
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="155px">
            <template #default="scope">
                <el-button type="success" text="编辑" @click="ShowUpdate(scope.row.role_id)">编辑</el-button>
                <el-button type="danger" text="删除" @click="deletiondata(scope.row.role_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 移植的页码组件 -->
    <el-pagination :page-size="10" :pager-count="11" layout="prev, pager, next, jumper" :total="rows" @current-change="handlePageChange" style="float:right;margin-top:20px" :hide-on-single-page="true"></el-pagination>
    <!-- 添加抽屉 -->
    <el-drawer v-model="drawer">
        <template #header>
            <h4 style="text-align: left;">添加</h4>
        </template>
        <template #default>
            <el-form :model="addform" ref="addformref" :rules="rules" label-width="auto" style="text-align: left;">
                <el-row :gutter="20">
                    <!-- 左侧列 -->
                    <el-col :span="12">
                        <el-form-item label="角色名称" prop="Role_name">
                            <el-input placeholder="请输入" v-model="addform.Role_name"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="Role_status">
                            <el-radio-group v-model="addform.Role_status">
                                <el-radio :value="0">启用</el-radio>
                                <el-radio :value="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    
                    <!-- 右侧列 -->
                    <el-col :span="12">
                        <el-form-item label="排序" prop="Role_sort">
                            <el-input placeholder="请输入" v-model="addform.Role_sort"></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <!-- 备注横跨两列 -->
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" placeholder="请输入" v-model="addform.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="权限">
                            <el-tree
                            ref="permissionTreeRef"
                            :data="permissionTreeData"
                            show-checkbox
                            node-key="permission_id"
                            :props="treeProps"
                            :default-expand-all="true"
                            style="height: 600px; width: 100%; overflow: auto;"
                            @check="handlePermissionCheck"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="drawer = false">取消</el-button>
                <el-button type="primary" @click="Add">保存</el-button>
            </div>
        </template>
    </el-drawer>

    <!-- 修改抽屉 -->
    <el-drawer v-model="drawer2">
        <template #header>
            <h4 style="text-align: left;">修改角色</h4>
        </template>
        <template #default>
            <el-form :model="updateform" ref="updateformref" :rules="rules" label-width="auto" style="text-align: left;">
                <el-row :gutter="20">
                    <!-- 左侧列 -->
                    <el-col :span="12">
                        <el-form-item label="角色名称" prop="Role_name">
                            <el-input placeholder="请输入角色名称" v-model="updateform.Role_name"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="Role_status">
                            <el-radio-group v-model="updateform.Role_status">
                                <el-radio :value="0">启用</el-radio>
                                <el-radio :value="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    
                    <!-- 右侧列 -->
                    <el-col :span="12">
                        <el-form-item label="排序" prop="Role_sort">
                            <el-input placeholder="请输入排序值" v-model="updateform.Role_sort"></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <!-- 备注横跨两列 -->
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" placeholder="请输入备注" v-model="updateform.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="权限">
                            <el-tree
                                ref="updatePermissionTreeRef"
                                :data="permissionTreeData"
                                show-checkbox
                                node-key="permission_id"
                                :props="treeProps"
                                :default-expand-all="true"
                                :default-checked-keys="updateCheckedKeys"
                                style="height: 400px; width: 100%; overflow: auto;"
                                @check="handleUpdatePermissionCheck"
                                v-if="drawer2"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="drawer2 = false">取消</el-button>
                <el-button type="primary" @click="Update">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script>
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
import http from '../auth/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

export default {
    setup() {
        const router = useRouter();

        const rules = reactive({
            Role_name: [
                { required: true, message: '角色名称不能为空', trigger: 'blur' }
            ],
            Role_sort: [
                { required: true, message: '排序不能为空', trigger: 'change' }
            ]
        });
        
        // 翻页相关变量 - 从第一个文件移植
        const rows = ref(0);          // 总数据量
        const currentPage = ref(1);   // 当前页码
        
        // 表单引用和状态
        const dictref = ref(null);
        const dictform = reactive({
            Role_code: "",
            Role_status: null
        });
        
        // 表格数据
        const dictdata = ref([]);
        const tableRef = ref(null);
        const selectdata = ref([]);

        // 翻页方法 - 从第一个文件移植
        function handlePageChange(page) {
            currentPage.value = page;
            All();
        }

        function Reset() {
            // 添加手动重置确保生效
            dictref.value?.resetFields();
            All();
        }

        // 查询数据
        function Search() {
            currentPage.value = 1; // 重置到第一页
            All();
        }

        // 获取数据 - 修改为使用分页参数
        function All() {
            http.get("/Role/GetFenYe", {
                params: {
                    CurrentPage: currentPage.value,
                    Role_code: dictform.Role_code,
                    Role_name: dictform.Role_code,
                    Role_status: dictform.Role_status
                }
            }).then(res => {
                // 确保正确获取总记录数和列表数据
                rows.value = res.data.rows; 
                dictdata.value = res.data.list;
                
                // 调试信息
                console.log("总记录数:", rows.value);
                console.log("当前页数据:", dictdata.value);
            }).catch(err => {
                console.error("获取数据失败:", err);
                ElMessage.error("获取数据失败，请重试");
            });
        }

        //#endregion 删除，启用，停用


        //获取选中数据
        function SelectChange(val){
            selectdata.value=val;
        }

        // 删除方法
        function deletiondata(id) {
            ElMessageBox.confirm('确定要删除该岗位吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    // 调用后端逻辑删除接口（PUT 方法）
                    const res = await http.put('/Role/GetDelete?id='+id);
                    // 处理成功响应
                    if (res.data?.code === 1) {
                        ElMessage.success(res.data.message || '删除成功');
                        All(); // 刷新列表
                    } else if (res.data && res.data.code === 0) {
                        ElMessageBox.alert(res.data.message || '删除失败：该角色已被分配给用户，无法删除', '删除失败', {
                            type: 'warning',
                            confirmButtonText: '确定'
                        });
                    } else if (res.data && res.data.code === -1) {
                        ElMessage.warning(res.data.message || '角色不存在或已被删除');
                        All(); // 也刷新列表
                    } else {
                        ElMessage.error('响应格式错误或未知成功状态: ' + (res.data?.message || ''));
                    }
                } catch (err) {
                    console.error("删除角色请求失败:", err);
                    
                    // 统一错误处理
                    let errorMsg = '删除请求失败';
                    if (err.response?.data?.message) {
                        errorMsg = err.response.data.message;
                    } else if (err.message) {
                        errorMsg = err.message;
                    }
                    
                    // 根据错误类型显示不同提示
                    if (err.response?.data?.code === 0) {
                        ElMessageBox.alert(errorMsg, '删除失败', {
                            type: 'warning',
                            confirmButtonText: '确定'
                        });
                    } else if (err.response?.data?.code === -1) {
                        ElMessage.warning(errorMsg || '角色不存在或已被删除');
                        All(); // 刷新列表
                    } else {
                        ElMessage.error(errorMsg);
                    }
                }
            }).catch(() => {
                // 用户取消操作
            });
        }

        // 批量删除
        function DeleteAll() {
            if (selectdata.value.length === 0) {
                ElMessage.warning('请选择要删除的数据');
                return;
            }
            ElMessageBox.confirm('确定要删除选中的角色吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => { // 改为 async 以便使用 await
                try {
                    let successCount = 0;
                    let failCount = 0;
                    let messages = []; // 存储失败的具体原因

                    // 使用 for...of 循环以便 await 每个请求
                    for (const item of selectdata.value) {
                        try {
                            // 对每个选中的角色发起删除请求
                            const res = await http.put(`/Role/GetDelete?id=${item.role_id}`);

                            // 处理成功的响应 (HTTP 200 OK)
                            if (res.data && res.data.code === 1) {
                                successCount++;
                            } else if (res.data && res.data.code === 0) {
                                // *** 修改点 3: 收集有引用的错误信息 ***
                                messages.push(`角色 ${item.role_name}: ${res.data.message || '删除失败：该角色已被分配给用户，无法删除'}`);
                                failCount++;
                                // *** 修改结束 ***
                            } else if (res.data && res.data.code === -1) {
                                // 对于不存在的，可以计入失败
                                messages.push(`角色 ${item.role_name}: ${res.data.message || '角色不存在或已被删除'}`);
                                failCount++;
                            } else {
                                messages.push(`角色 ${item.role_name}: 响应异常 (${res.data?.message || '未知错误'})`);
                                failCount++;
                            }
                        } catch (err) {
                            // 处理失败的响应 (HTTP 4xx, 5xx)
                            failCount++;
                            let errorMsg = `请求失败`;
                            if (err.response && err.response.data && err.response.data.message) {
                                // *** 修改点 4: 区分有引用的错误 ***
                                if (err.response.data.code === 0) {
                                    // 如果是后端明确返回的引用错误 (code=0)
                                    errorMsg = err.response.data.message;
                                } else {
                                    errorMsg = err.response.data.message; // 其他后端错误
                                }
                                // *** 修改结束 ***
                            } else if (err.message) {
                                errorMsg = err.message; // 使用 Axios 或网络的错误信息
                            }
                            messages.push(`角色 ${item.role_name}: ${errorMsg}`);
                            console.error(`删除角色 ${item.role_name} 失败:`, err);
                        }
                    }

                    // 显示批量删除的最终结果
                    if (successCount > 0) {
                        ElMessage.success(`成功删除 ${successCount} 条数据`);
                    }
                    if (failCount > 0) {
                        // *** 修改点 5: 使用 ElMessageBox.alert 显示所有失败信息，并使用 warning 类型 ***
                        // 将 \n 替换为 <br> 以便在 HTML 中正确换行
                        const combinedMessage = messages.length > 3 ?
                            `${messages.slice(0, 3).join('<br>')}<br>...(还有 ${messages.length - 3} 条错误)` :
                            messages.join('<br>');

                        // 检查是否主要是因为引用失败
                        const hasReferenceError = messages.some(msg => msg.includes('引用') || msg.includes('无法删除'));

                        ElMessageBox.alert(combinedMessage, `删除结果 (${successCount} 成功, ${failCount} 失败)`, {
                            type: hasReferenceError ? 'warning' : 'error', // 如果有引用错误，使用 'warning' (感叹号)
                            confirmButtonText: '确定',
                            dangerouslyUseHTMLString: true, // 允许使用 HTML
                            customClass: 'scrollable-alert' // 可选：添加自定义类名用于样式调整
                        }).catch((alertErr) => {
                            // 可选：处理弹窗本身可能的错误（例如 Element Plus 问题）
                            console.warn("显示批量删除结果弹窗时失败:", alertErr);
                        });
                        // *** 修改结束 ***
                    }

                    All(); // 刷新数据
                    tableRef.value.clearSelection(); // 清空选中状态
                } catch (err) {
                    // 捕获 for 循环之外的意外错误 (可能性较低)
                    console.error("批量删除过程中发生未预期的错误:", err);
                    ElMessage.error('批量删除过程出错: ' + (err.message || ''));
                }
            }).catch(() => {
                // 用户取消批量删除操作 (点击了 Confirm 的取消按钮)
                ElMessage.info('已取消批量删除');
            });
        }
        
        // 批量停用
        function GetDeactivated() {
            if (selectdata.value.length === 0) {
                ElMessage.warning('请选择要停用的数据');
                return;
            }
            
            ElMessageBox.confirm('确定要停用选中的岗位吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const deletePromises = selectdata.value.map(item => {
                    return http.put(`/Role/GetDeactivated?id=${item.role_id}`);
                });
                
                Promise.all(deletePromises)
                    .then(results => {
                        const successCount = results.filter(res => res.data > 0).length;
                        if (successCount === selectdata.value.length) {
                            ElMessage.success(`成功停用 ${successCount} 条数据`);
                        } else {
                            ElMessage.warning(`成功停用 ${successCount} 条，失败 ${selectdata.value.length - successCount} 条`);
                        }
                        All(); // 刷新数据
                        tableRef.value.clearSelection(); // 清空选中状态
                    })
                    .catch(err => {
                        console.error(err);
                        ElMessage.error('停用失败');
                    });
            }).catch(() => {
                ElMessage.warning('已取消停用');
                return;
            });
        }
        
        // 批量启用
        function GetEnable() {
            if (selectdata.value.length === 0) {
                ElMessage.warning('请选择要启用的数据');
                return;
            }
            
            ElMessageBox.confirm('确定要启用选中的岗位吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const deletePromises = selectdata.value.map(item => {
                    return http.put(`/Role/GetEnable?id=${item.role_id}`);
                });
                
                Promise.all(deletePromises)
                    .then(results => {
                        const successCount = results.filter(res => res.data > 0).length;
                        if (successCount === selectdata.value.length) {
                            ElMessage.success(`成功启用 ${successCount} 条数据`);
                        } else {
                            ElMessage.warning(`成功启用 ${successCount} 条，失败 ${selectdata.value.length - successCount} 条`);
                        }
                        All(); // 刷新数据
                        tableRef.value.clearSelection(); // 清空选中状态
                    })
                    .catch(err => {
                        console.error(err);
                        ElMessage.error('启用失败');
                    });
            }).catch(() => {
                ElMessage.warning('已取消启用');
                return;
            });
        }
        //#endregion

        //#region 添加

        //添加抽屉
        const drawer = ref(false);

        const addformref = ref();
        //添加表单
        const addform = reactive({
            Role_code:"",
            Role_name:"",
            Role_status:0, // 默认启用
            Role_sort:"",
            remark:"",
            permissionIds: [] // 存储选中的权限ID
        })
       
        // 处理权限选择变化
        const handlePermissionCheck = () => {
            // 获取选中和半选状态的节点
            const checkedKeys = permissionTreeRef.value?.getCheckedKeys() || [];
            const halfCheckedKeys = permissionTreeRef.value?.getHalfCheckedKeys() || [];
            // 合并两种状态的节点ID
            addform.permissionIds = [...new Set([...checkedKeys, ...halfCheckedKeys])];
            console.log("添加权限IDs:", addform.permissionIds);
        };

        // 添加数据
        async function Add() {
            addformref.value.validate(async (valid) => {
                if (!valid) return;
                
                try {
                // 确保获取最新的权限选择
                const checkedKeys = permissionTreeRef.value?.getCheckedKeys() || [];
                const halfCheckedKeys = permissionTreeRef.value?.getHalfCheckedKeys() || [];
                addform.permissionIds = [...new Set([...checkedKeys, ...halfCheckedKeys])];
                
                // 生成角色编号
                const res = await http.get("/CodeRule/GeneratedCode?id=12");
                addform.Role_code = res.data;

                const addRoleDto = {
                    Role_code: addform.Role_code,
                    Role_name: addform.Role_name,
                    Role_status: addform.Role_status,
                    Role_sort: addform.Role_sort,
                    Remark: addform.remark
                };

                const addRolesWithPermissionsDto = {
                    permissionIds: addform.permissionIds,
                    addRoleDto
                }

                const response = await http.post("/Role/GetAdd", addRolesWithPermissionsDto);

                if (response.data > 0) {
                    ElMessage.success('添加成功');
                    All();
                    drawer.value = false;
                }
                } catch (err) {
                console.error("添加失败:", err);
                ElMessage.error("添加角色失败");
                }
            });
        }
        
        //权限控件
        // 权限树相关变量
        const permissionTreeRef = ref(null);
        const permissionTreeData = ref([]);
        const treeProps = {
            children: 'children',
            label: 'permission_name'
        };
        
        // 获取权限树数据
        const fetchPermissionTree = async () => {
            try {
                const response = await http.get("/Permission/GetAllPermissionTree");
                permissionTreeData.value = response.data;
                console.log("权限:", response.data); // 调试用
            } catch (error) {
                console.error("获取权限树失败:", error);
                ElMessage.error("获取权限树失败");
            }
        };

        // 监听添加抽屉的关闭
        watch(() => drawer.value, (newVal, oldVal) => {
            if (oldVal && !newVal) { // 从打开状态变为关闭状态
                // 重置添加表单
                if (addformref.value) {
                    addformref.value.resetFields();
                }
                // 重置权限树的选中状态
                if (permissionTreeRef.value) {
                    permissionTreeRef.value.setCheckedKeys([]);
                }
                // 重置权限ID数组
                addform.permissionIds = [];
            }
        });
        //#endregion


        //#region 修改

        //修改抽屉
        const drawer2=ref(false);
        //修改表单
        const updatePermissionTreeRef = ref(null);
        const updateCheckedKeys = ref([]);  // 添加这一行，用于存储编辑时要选中的权限
        const updateformref=ref();
        const updateform = reactive({
            Role_id: 0,         // 角色ID
            Role_name: "",      // 角色名称
            Role_status: 0,     // 状态
            Role_sort: "",      // 排序
            remark: "",         // 备注
            permissionIds: []   // 权限ID列表
        });

        //处理修改抽屉中权限树的选择变化
        const handleUpdatePermissionCheck = () => {
            // 获取选中和半选状态的节点
            const checkedKeys = updatePermissionTreeRef.value?.getCheckedKeys() || [];
            const halfCheckedKeys = updatePermissionTreeRef.value?.getHalfCheckedKeys() || [];
            // 合并两种状态的节点ID
            updateform.permissionIds = [...new Set([...checkedKeys, ...halfCheckedKeys])];
            console.log("更新权限IDs:", updateform.permissionIds);
        };

        // 显示修改
        async function ShowUpdate(id) {
            drawer2.value = true;
            ElMessage.info("正在加载角色信息...");
            
            try {
                // 获取角色基本信息
                const roleRes = await http.get("/Role/GetID?id=" + id);
                const roleData = roleRes.data;
                
                // 填充角色信息
                updateform.Role_id = roleData.role_id;
                updateform.Role_name = roleData.role_name;
                updateform.Role_status = roleData.role_status;
                updateform.Role_sort = roleData.role_sort;
                updateform.remark = roleData.remark;
                
                // 获取角色权限
                const permRes = await http.get("/RolePermission/Getpid?pid=" + id);
                
                // 提取 permission_id 形成纯ID数组
                const savedPermissionIds = permRes.data.map(item => item.permission_id) || [];
                updateform.permissionIds = savedPermissionIds;
                
                // 只选中叶子节点，以便让树自然显示父子关系
                const leafNodeIds = findLeafNodesIds(permissionTreeData.value, savedPermissionIds);
                updateCheckedKeys.value = leafNodeIds;
                
                console.log("加载权限ID列表:", savedPermissionIds);
                console.log("设置叶子节点:", leafNodeIds);
                
                ElMessage.success("角色信息加载完成");
            } catch (err) {
                console.error("获取角色信息失败:", err);
                ElMessage.error("获取角色信息失败: " + (err.response?.data?.message || err.message));
            }
        }
        
        // 查找叶子节点ID
        function findLeafNodesIds(treeData, savedIds) {
            const leafIds = [];
            
            // 递归查找叶子节点
            const findLeafNodes = (nodes) => {
                if (!nodes || !nodes.length) return;
                
                for (const node of nodes) {
                    // 检查当前节点是否在保存的权限中
                    const isNodeSaved = savedIds.includes(node.permission_id);
                    
                    // 如果是叶子节点并且在保存的权限中
                    if ((!node.children || node.children.length === 0) && isNodeSaved) {
                        leafIds.push(node.permission_id);
                    }
                    // 如果有子节点
                    else if (node.children && node.children.length > 0) {
                        // 检查是否所有子节点都被保存
                        const childIds = node.children.map(child => child.permission_id);
                        const allChildrenSaved = childIds.every(id => savedIds.includes(id));
                        
                        // 如果所有子节点都被保存，则选中父节点
                        if (allChildrenSaved && isNodeSaved) {
                            leafIds.push(node.permission_id);
                        }
                        // 否则递归处理子节点
                        else {
                            findLeafNodes(node.children);
                        }
                    }
                }
            };
            
            findLeafNodes(treeData);
            return leafIds;
        }

        // 修改
        async function Update() {
            updateformref.value.validate(async (valid) => {
                if (!valid) {
                    ElMessage.warning('请正确填写表单');
                    return;
                }
                
                try {
                    // 确保获取最新的权限选择
                    const checkedKeys = updatePermissionTreeRef.value?.getCheckedKeys() || [];
                    const halfCheckedKeys = updatePermissionTreeRef.value?.getHalfCheckedKeys() || [];
                    updateform.permissionIds = [...new Set([...checkedKeys, ...halfCheckedKeys])];
                    
                    const updateRolesWithPermissionsDto = {
                        permissionIds: updateform.permissionIds,
                        updateRoleDto: {
                            Role_id: updateform.Role_id,
                            Role_name: updateform.Role_name,
                            Role_status: updateform.Role_status,
                            Role_sort: updateform.Role_sort,
                            remark: updateform.remark
                        }
                    };

                    const res = await http.put("/Role/GetEdit", updateRolesWithPermissionsDto);
                    if (res.data > 0) {
                        ElMessage.success('修改成功');
                        All();
                        drawer2.value = false;
                    } else {
                        ElMessage.warning('修改失败，请重试');
                    }
                } catch (err) {
                    console.error("修改失败:", err);
                    ElMessage.error("修改角色失败: " + (err.response?.data?.message || err.message));
                }
            });
        }

        // 监听修改抽屉的关闭
        watch(() => drawer2.value, (newVal, oldVal) => {
            if (oldVal && !newVal) { // 从打开状态变为关闭状态
                // 重置修改表单
                if (updateformref.value) {
                    updateformref.value.resetFields();
                }
                // 重置权限树的选中状态
                if (updatePermissionTreeRef.value) {
                    updatePermissionTreeRef.value.setCheckedKeys([]);
                }
                // 重置权限ID数组
                updateform.permissionIds = [];
            }
        });
        //#endregion


        // 初始化加载
        onMounted(() => {
            fetchPermissionTree()
            All();
        });

        return {
            rules,
            handleUpdatePermissionCheck,
            updatePermissionTreeRef,
            updateCheckedKeys, // 暴露给模板
            updateform,
            ShowUpdate,
            Update,
            handlePermissionCheck,
            permissionTreeRef,
            permissionTreeData,
            treeProps,
            drawer,
            addformref,
            addform,
            Add,
            drawer2,
            updateformref,
            updateform,
            ShowUpdate,
            Update,
            rows,
            currentPage,
            handlePageChange,
            SelectChange,
            Reset,
            Search,
            tableRef,
            deletiondata,
            DeleteAll,
            GetDeactivated,
            GetEnable,
            dictform,
            dictref,
            dictdata
        }
    }
}
</script>

<style scoped>
</style>